<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.viewslider-0.1.js"></script>
		<script type="text/javascript">
			$(function() {
				$(window).bind('resize', function() {
					$('.viewslider').viewslider('update');
				});
				
				$('#vs1').viewslider({
					width: '800px',
					height: '120px'
				});
				$('#vs2').viewslider({
					width: '120px',
					height: '500px',
					vertical: true
				});
				$('#vs3').viewslider({
					width: '200px',
					height: '400px',
					attachStart: 50,
					attachEnd: 50,
					vertical: true
				});
			});
		</script>
		<style>			
			body {
				font-size: 14px;
				font-family: Tahoma;
				margin-left: 50px;
			}
			img {
				cursor: pointer;
			}
			.myslider {
				border: 2px solid #ccc;
				border-radius: 15px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<p>
			<h4>Simple slider with default settings</h4>
			<div id="vs1" class="myslider">
				<img src="icons/cd.png" width="120" />
				<img src="icons/computer.png" width="120" />
				<img src="icons/disk.png" width="120" />
				<img src="icons/dvd.png" width="120" />
				<img src="icons/fav.png" width="120" />
				<img src="icons/folder.png" width="120" />
				<img src="icons/internet.png" width="120" />
				<img src="icons/network.png" width="120" />
				<img src="icons/recycle.png" width="120" />
				<img src="icons/recycle-empty.png" width="120" />
				<img src="icons/removable.png" width="120" />
				<img src="icons/search.png" width="120" />
				<img src="icons/usb.png" width="120" />
				<img src="icons/zip.png" width="120" />
			</div>
		</p>
		
		<p>
			<h4>Simple vertical slider</h4>
			<div id="vs2" class="myslider">
				<img src="icons/cd.png" width="120" />
				<img src="icons/computer.png" width="120" />
				<img src="icons/disk.png" width="120" />
				<img src="icons/dvd.png" width="120" />
				<img src="icons/fav.png" width="120" />
				<img src="icons/folder.png" width="120" />
				<img src="icons/internet.png" width="120" />
				<img src="icons/network.png" width="120" />
				<img src="icons/recycle.png" width="120" />
				<img src="icons/recycle-empty.png" width="120" />
				<img src="icons/removable.png" width="120" />
				<img src="icons/search.png" width="120" />
				<img src="icons/usb.png" width="120" />
				<img src="icons/zip.png" width="120" />
			</div>
		</p>

		<p>
			<h4>Simple vertical slider with one element</h4>
			<div id="vs3" class="myslider">
				<p style="margin: 0px; padding: 10px;">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lorem nibh. Proin venenatis quam sed arcu elementum sollicitudin. Vivamus porttitor neque nec dui adipiscing vel blandit nibh tempus. Aenean nec nisi sapien, non vehicula nisl. Praesent cursus tincidunt sem, venenatis semper odio lacinia ac. Aliquam lorem tellus, aliquet ut imperdiet vitae, lobortis id nulla. Morbi congue aliquet aliquam. In eu suscipit dui.
					Suspendisse quis tellus ac nisl dapibus tincidunt. Nullam vel est neque, vitae laoreet tellus. Maecenas iaculis interdum auctor. Maecenas magna ligula, auctor vitae varius vestibulum, tincidunt cursus urna. Pellentesque dui elit, posuere sed vulputate ut, condimentum vel turpis. Etiam dictum congue justo, ut vulputate velit auctor at. Aliquam sed leo sed nunc vestibulum pretium a eu est. Etiam fermentum molestie risus, vel mollis eros tempor sed. Duis faucibus auctor dui, non consectetur lorem elementum ut. Fusce sed lacus quam, quis iaculis tellus. Nam id massa libero, id tempor sapien. Donec lobortis tortor justo. Quisque a est tortor, ac pellentesque magna. Etiam sit amet dui nec eros ultricies tincidunt quis eget purus. Suspendisse potenti. Nullam iaculis pretium quam nec congue.
					Nunc rhoncus eleifend lacinia. Vestibulum sed velit at tellus lacinia scelerisque. Proin odio velit, auctor sit amet vehicula a, pellentesque ac ipsum. Sed convallis condimentum ante vel hendrerit. Cras ac massa nisi. Vivamus at dictum orci. Pellentesque ultrices adipiscing ligula non aliquet. Nunc vitae sodales lacus.
				</p>
			</div>
		</p>
		
	</body>
</html>